<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Bill Management</title>
    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <style>
        /* Custom CSS can be added here */
        body {
            padding-top: 20px;
        }
        th, td {
            text-align: center;
            vertical-align: middle !important;
        }
        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }
        /* 弹窗样式 */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        .popup2 {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        label {
            width: 100px;
            margin-bottom: 10px;
        }
        #billPopup,
        #addBillPopup {
            display: none;
        }


        /* 样式化表单 */
        .popup form  form{
            max-width: 300px;
            margin: 0 auto;
        }

        .popup label ,.popup2 label{
            display: block;
            margin-bottom: 5px;
        }

        .popup input,
        .popup select,
        .popup textarea,
        .popup2 input,
        .popup2 select,
        .popup2 textarea{
            width: calc(100% - 12px);
            padding: 5px;
            margin-bottom: 10px;
            border-radius: 3px;
            border: 1px solid #ccc;
        }

        .popup button ,.popup2 button{
            background-color: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        .popup button:not(:last-child) ,.popup2 button:not(:last-child){
            margin-right: 10px;
        }
        .row {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-11">
            <h1>欢迎进入个人账单管理系统！</h1>
        </div>
        <div class="col1 text-end">
            <a href="/" class="btn btn-danger">返回首页</a>
        </div>
    </div>
    <form id="conditionFrom" action="/Bill/byConditions" method="post" class="mb-3" th:object="${conditions}">
        <div class="form-row">
            <div class="form-group col-md-3">
                <label for="typeid">账单类型</label>
                <select id="typeid" name="typeid" class="form-control" th:field="*{typeid}">
                    <option value="0">所有</option>
                    <option value="1">收入</option>
                    <option value="2">支出</option>
                    <option value="3">借款</option>
                    <option value="4">还款</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <label for="title">账单标题</label>
                <input type="text" th:field="*{title}" id="title" class="form-control">
            </div>
            <div class="form-group col-md-3">
                <label for="remark">账单备注</label>
                <input type="text" th:field="*{remark}" id="remark" class="form-control">
            </div>
            <div class="form-group col-md-3">
                <label for="billtime">账单截止日期</label>
                <input type="date" th:field="*{billtime}" id="billtime" class="form-control">
            </div>
        </div>
        <button type="submit" class="btn btn-primary" >查询</button>
        <button type="button" class="btn btn-success" onclick="add()">添加</button>
        <a href="/Bill/byConditions?pageNum=1&typeid=0&title=&remark=&billtime=null" class="btn btn-warning">重置</a>
    </form>
    <table class="table table-bordered">
        <thead class="thead-dark">
        <tr>
            <th>账单编号</th>
            <th>账单类型</th>
            <th>账单标题</th>
            <th>账单日期</th>
            <th>账单金额</th>
            <th>账单备注</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="bill : ${pageInfo.list}">
            <td th:text="${bill.id}">账单编号</td>
            <td>
                <span th:switch="${bill.typeid}">
                    <span th:case="1">收入</span>
                    <span th:case="2">支出</span>
                    <span th:case="3">借款</span>
                    <span th:case="4">还款</span>
                </span>
            </td>
            <td th:text="${bill.title}">账单标题</td>
            <td th:text="${bill.billtime}">账单日期</td>
            <td th:text="${bill.price}">账单金额</td>
            <td th:text="${bill.remark}">账单备注</td>
            <td>
                <button class="btn btn-primary"
                        th:attr="onclick='editBill(\'' + ${bill.id} + '\', \'' + ${bill.typeid} + '\', \'' + ${bill.title} + '\', \'' + ${bill.billtime} + '\', \'' + ${bill.price} + '\', \'' + ${bill.remark} + '\')'">
                    编辑
                </button>
                <button type="button" class="btn btn-primary"
                        th:attr="onclick='deleteBill(\'' + ${bill.id} + '\')'">
                    删除
                </button>

            </td>
        </tr>
        </tbody>
    </table>
    <div class="container">
        <div style="margin-top: 10px;">
            <div class="row">当前第<span th:text="${pageInfo.pageNum}"></span>页.一共 <span th:text="${pageInfo.pages}"></span> 页.总共<span th:text="${pageInfo.total}"></span>条</div>

            <ul id="page" class="pagination justify-content-center">
                <li class="page-item">
                    <a class="page-link" th:href="@{'/Bill/byConditions?pageNum='+${pageInfo.getNavigateFirstPage()}+'&typeid='+${conditions.typeid}+'&title='+${conditions.title}+'&remark='+${conditions.remark}+'&billtime='+${conditions.billtime}}">首页</a>
                </li>
                <li class="page-item" th:if="${pageInfo.hasPreviousPage}">
                    <a class="page-link" th:href="@{'/Bill/byConditions?pageNum='+${pageInfo.getPrePage()}+'&typeid='+${conditions.typeid}+'&title='+${conditions.title}+'&remark='+${conditions.remark}+'&billtime='+${conditions.billtime}}">
                        <i class="fa fa-angle-left"></i>上一页&nbsp;
                    </a>
                </li>
                <th:block th:if="${pageInfo.hasNextPage}">
                    <li class="page-item">
                        <a class="page-link" th:href="@{'/Bill/byConditions?pageNum='+${pageInfo.getNextPage()}+'&typeid='+${conditions.typeid}+'&title='+${conditions.title}+'&remark='+${conditions.remark}+'&billtime='+${conditions.billtime}}">下一页&nbsp;<i class="fa fa-angle-right"></i></a>
                    </li>
                </th:block>
                <li>
                    <a class="page-link" th:href="@{'/Bill/byConditions?pageNum='+${pageInfo.getNavigateLastPage()}+'&typeid='+${conditions.typeid}+'&title='+${conditions.title}+'&remark='+${conditions.remark}+'&billtime='+${conditions.billtime}}">尾页</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="popup" id="billPopup" style="display: none;">
        <form action="/Bill/editBill" method="post" id="billForm">
            <label for="billId">账单编号：</label>
            <input type="text" name="id" id="billId" readonly>
            <br><br>
            <label for="billType">账单类型：</label>
            <select name="typeid" id="billType">
                <option value="1">收入</option>
                <option value="2">支出</option>
                <option value="3">借款</option>
                <option value="4">还款</option>
            </select><br><br>
            <label for="billTitle">账单标题：</label>
            <input type="text" name="title" id="billTitle"><br><br>
            <label for="billDate">账单时间：</label>
            <input type="date" name="billtime" id="billDate"><br><br>
            <label for="billAmount">账单金额：</label>
            <input type="number" name="price" id="billAmount" min="0" step="0.01"><br><br>
            <label for="billRemark">账单备注：</label>
            <textarea name="remark" id="billRemark" rows="3"></textarea><br><br>
            <button type="submit" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-primary" onclick="closebtn()">关闭</button>
        </form>
    </div>
    <div class="popup2" id="addBillPopup" style="display: none;">
        <form action="/Bill/addBill" method="post" id="addBillForm">
            <label for="newBillType">账单类型：</label>
            <select name="typeid" id="newBillType">
                <option value="1">收入</option>
                <option value="2">支出</option>
                <option value="3">借款</option>
                <option value="4">还款</option>
            </select><br><br>
            <label for="newBillTitle">账单标题：</label>
            <input type="text" name="title" id="newBillTitle" required minlength="3"><br><br>
            <label for="newBillDate">账单时间：</label>
            <input type="date" name="billtime" id="newBillDate"><br><br>
            <label for="newBillAmount">账单金额：</label>
            <input type="number" name="price" id="newBillAmount" min="0" step="0.01"><br><br>
            <label for="newBillRemark">账单备注：</label>
            <textarea name="remark" id="newBillRemark" rows="3"></textarea><br><br>
            <button type="submit" class="btn btn-primary">添加</button>
            <button type="button" class="btn btn-primary" onclick="closebtn()">关闭</button>
        </form>
        </form>
    </div>
</div>
<script>

    function deleteBill(id) {
        if (confirm("确定要删除吗？")) {
            document.getElementById("billId").value = id;
            document.getElementById("billForm").action = "/Bill/deleteBill";
            document.getElementById("billForm").submit();
            alert("删除成功！");
        }
    }
    function editBill(id, typeid, title, billtime, price, remark) {
        document.getElementById('billPopup').style.display = 'block';
        document.getElementById('overlay').style.display = 'block';
        document.getElementById("billId").value = id;
        document.getElementById("billTitle").value = title;
        document.getElementById("billDate").value = billtime;
        document.getElementById("billAmount").value = price;
        document.getElementById("billRemark").value = remark;
        document.getElementById("billType").value = typeid;
    }
    function add() {
        document.getElementById('addBillPopup').style.display = 'block';
        document.getElementById('overlay').style.display = 'block';
        setTime();
    }
    function setTime()
    {
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0');
            var yyyy = today.getFullYear();
            today = yyyy + '-' + mm + '-' + dd;
            document.getElementById('newBillDate').value = today;
    }
    function closebtn() {
        document.getElementById('billPopup').style.display = 'none';
        document.getElementById('addBillPopup').style.display = 'none';
        document.getElementById('overlay').style.display = 'none';
    }
</script>
</body>
</html>
